{% load static %}
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="/static/img/cloud.png">
    <script src="/static/libs/jquery-1.12.4/jquery.min.js"></script>
    <script src="/static/libs/jquery-3.5.1.min.js"></script>
    <script src="/static/jquery-3.3.1.js"></script>
    <script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
    <title>{% block title %}{% endblock title %}</title>
    <link href="{% static 'bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
    <link href="{% static 'dashboard.css' %}" rel="stylesheet">
    <link rel="stylesheet" href="{% static 'fontawesome/css/font-awesome.min.css' %}">
    <link rel="stylesheet" href="{% static 'Sweetarlt/sweetalert.css' %}">
    <link rel="stylesheet" href="{% static '/css/toastr.css' %}" rel="stylesheet">
    <link rel="stylesheet" href="{% static '/css/toastr.min.css' %}" rel="stylesheet">
     <script src="/static/Sweetarlt/sweetalert.min.js"></script>
</head>

<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                    aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="{% url 'zhanggh0381:index' %}">Swift网盘管理系统</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">{{request.session.user}}</a></li>
                <li><a href="{% url 'zhanggh0381:login' %}">退出系统</a></li>
            </ul>
            <form class="navbar-form navbar-right">
                <input type="text" class="form-control" placeholder="请输入...">
                <input type="submit" class="btn btn-danger" value="搜索">
            </form>
        </div>
    </div>
</nav>

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
            <ul class="nav nav-sidebar">
                <li class="{% block container_list %}{% endblock container_list %}"><a
                        href="{% url 'zhanggh0381:list_containers' %}">Swift容器列表</a></li>
                <li class="{% block add_publisher %}{% endblock add_publisher %}"><a
                        href="#">Swift文件列表</a></li>
            </ul>

        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">

            {% block main %}

            {% endblock %}
        </div>
    </div>
</div>


<div class="modal fade" tabindex="-1" role="dialog" id="myModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">新增容器表单</h4>
            </div>
            <div class="modal-body">
                <form  class="form-horizontal" >
                    {% csrf_token %}
                    <div class="form-group">
                        <label for="container_name" class="col-sm-2 control-label">容器名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="container_name" name="container_name" placeholder="请输入容器名(命名不能有'/'字符)">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="Meta_name" class="col-sm-2 control-label">元数据</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="Meta_name" name="Meta_name" placeholder="请输入元数据信息">
                        </div>
                    </div>
                     <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="submit" class="btn btn-primary add_btn">新增</button>
            </div>
                </form>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script src="/static/Sweetarlt/sweetalert.min.js"></script>
<script src="/static/toastr.js"></script>
<script type="text/javascript" >
	$(document).on("click",".add_btn",function() {
	                var container_name = $("#container_name").val()
                    var Meta_name = $("#Meta_name").val()
	           $.ajax({
                                        url:"/zgh0381/add_containers/",
                                        type:"POST",
                                        data:{"containername":container_name ,"meta":Meta_name},
                                         beforeSend: function (xhr, settings) {
                                        xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
                                      },
                                        success:function(result) {
                                                if( result.info == 1){
                                                    swal('新增', '新增成功', 'success');
                                                    toastr.success("新增容器成功!", "成功")

                                                }

                                            //刷新
                                            window.window.location.href = "/zgh0381/list_containers/";


                                        }
               });



    })

     toastr.options = { // toastr配置
                        "closeButton": true, //是否显示关闭按钮
                        "debug": false, //是否使用debug模式
                        "progressBar": true, //是否显示进度条，当为false时候不显示；当为true时候，显示进度条，当进度条缩短到0时候，消息通知弹窗消失
                        "showDuration": "5000", //显示的动画时间
                        "hideDuration": "50000", //消失的动画时间
                        "timeOut": "50000", //展现时间
                        "extendedTimeOut": "1000", //加长展示时间
                        "showEasing": "swing", //显示时的动画缓冲方式
                        "hideEasing": "linear", //消失时的动画缓冲方式
                        "showMethod": "fadeIn", //显示时的动画方式
                        "hideMethod": "fadeOut" //消失时的动画方式
                    }

 </script>

</body>
</html>